<!DOCTYPE html>
<html>

<head>
  <title>Socket.IO chat</title>
  <meta charset="utf-8" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font: 13px Helvetica, Arial;
    }

    form {
      background: #000;
      padding: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: 0.5%;
    }

    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }

    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #messages li {
      padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
</head>

<body>
  <!-- 消息列表 -->
  <ul id="messages"></ul>

  <!-- 发送消息的表单 -->
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>

  <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    // 建立链接  let ws = new WebScoket(链接地址)
    const socket = io("http://toutiao.itheima.net", {
      query: {
        // 从项目中的本地存储手动获取token字符串
        token: "1a0183a6-7b30-4ec7-a400-76bdbeb2a9eb"
      },
      // 使用websocket协议通信，否则默认使用轮询方案
      transports: ['websocket']
    })

    // 当客户端与服务器链接成功， 原生 open事件   socketio 会触发connect事件
    //  在 socketio 中，使用on语法来注册事件
    socket.on("connect", function () {
      console.log("链接成功");

      $("#messages").append(`<li>与服务器链接成功</li>`)
    })

    // 发送消息
    $("form").on("submit", (e) => {
      e.preventDefault()

      // 需要给服务器发送消息  原生 send   socketio通过emit来触发 message 事件
      // socket.emit("message", 消息)
      socket.emit("message", {
        msg: $("#m").val().trim(),
        timestamp: Date.now()
      })

      $("#messages").append(`<li>我说 ${$("#m").val().trim()}</li>`)
    })

    // 如何去获取到服务器响应的结果  客户端需要监听message事件
    socket.on("message", (data) => {
      console.log("受到了", data);
      $("#messages").append(`<li>服务器说 ${data.msg}</li>`)
    })

    // websocket  和  ajax 之间的区别
    //  1.  ajax 只能是客户端找服务器，服务器进行响应
    //  2.  websocket 是双向通信
    //  ajax 会受到浏览器的同源策略限制   websocket 通信协议是不会受到限制的
  </script>
</body>

</html>